const HtmlWebpackPlugin = require("html-webpack-plugin");
//声明配置
module.exports = {
  //入口
  entry: {
    //配置多个入口
    login: "./src/pages/login/index.js", // login.js
    users: "./src/pages/users/index.js", // users.js
    main: "./src/pages/index/index.js", // index.js main.js  app.js
    userAdd: "./src/pages/userAdd/index.js", // index.js main.js  app.js
    userEdit: "./src/pages/userEdit/index.js", // index.js main.js  app.js
  },
  //出口
  output: {
    //输出的文件夹
    path: __dirname + "/build",
    //文件的子路径
    filename: "js/[name].js",
    clean: true,
  },
  //设置模式
  mode: "development",
  //配置loader
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // 2. 配置打包HTML的插件
    new HtmlWebpackPlugin({
      template: "./src/pages/login/index.html", // 指定html模板文件。
      inject: "body", // 将打包生成的JS文件放置在body尾部
      filename: "login.html",
      hash: true, // 在引入JS时增加hash后缀字符串,去除缓存。
      chunks: ['login'], //块儿
      minify: {
        // removeAttributeQuotes: true, // 移除属性中的双引号
        // removeComments: true, // 移除注释
        // collapseWhitespace: true, // 去除空格与换行
      },
    }),

    new HtmlWebpackPlugin({
      template: "./src/pages/users/index.html", // 指定html模板文件。
      inject: "body", // 将打包生成的JS文件放置在body尾部
      filename: "users.html",
      chunks: ['users'],
      hash: true, // 在引入JS时增加hash后缀字符串,去除缓存。
      minify: {
        // removeAttributeQuotes: true, // 移除属性中的双引号
        // removeComments: true, // 移除注释
        // collapseWhitespace: true, // 去除空格与换行
      },
    }),

    new HtmlWebpackPlugin({
      template: "./src/pages/index/index.html", // 指定html模板文件。
      inject: "body", // 将打包生成的JS文件放置在body尾部
      filename: "index.html",
      chunks: ['index'],
      hash: true, // 在引入JS时增加hash后缀字符串,去除缓存。
      minify: {
        // removeAttributeQuotes: true, // 移除属性中的双引号
        // removeComments: true, // 移除注释
        // collapseWhitespace: true, // 去除空格与换行
      },
    }),

    new HtmlWebpackPlugin({
      template: "./src/pages/userAdd/index.html", // 指定html模板文件。
      inject: "body", // 将打包生成的JS文件放置在body尾部
      filename: "userAdd.html",
      chunks: ['userAdd'],
      hash: true, // 在引入JS时增加hash后缀字符串,去除缓存。
      minify: {
        // removeAttributeQuotes: true, // 移除属性中的双引号
        // removeComments: true, // 移除注释
        // collapseWhitespace: true, // 去除空格与换行
      },
    }),

    new HtmlWebpackPlugin({
      template: "./src/pages/userEdit/index.html", // 指定html模板文件。
      inject: "body", // 将打包生成的JS文件放置在body尾部
      filename: "userEdit.html",
      chunks: ['userEdit'],
      hash: true, // 在引入JS时增加hash后缀字符串,去除缓存。
      minify: {
        // removeAttributeQuotes: true, // 移除属性中的双引号
        // removeComments: true, // 移除注释
        // collapseWhitespace: true, // 去除空格与换行
      },
    }),
  ],
  //开发服务的配置
  devServer: {
    port: 3000, // 设置端口号
    open: true, // 自动在浏览器中打开页面
  },
};
